<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('编辑小程序信息')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body>
<div class="main-content">
    <form id="form-shopApplet-edit" class="form-horizontal" th:object="${shopApplet}">
        <input id="shopAppletId" type="hidden" th:field="*{id}"/>
        <input id="shopId" type="hidden" th:field="*{shopId}"/>
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>小程序名称：</label>
                    <div class="col-sm-8">
                        <input id="appletName" name="appletName" placeholder="请输入小程序名称" class="form-control"
                               type="text" maxlength="50" th:value="*{appletName}" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>AppID：</label>
                    <div class="col-sm-8">
                        <input name="appletAppId" placeholder="请输入小程序AppID" class="form-control" type="text"
                               th:value="*{appletAppId}"
                               maxlength="100" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label">AppSecret：</label>
                    <div class="col-sm-8">
                        <input name="appletSecret" placeholder="请输入小程序AppSecret" class="form-control" type="text"
                               th:value="*{appletSecret}"
                               maxlength="100">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>营业状态：</label>
                    <div class="col-sm-8">
                        <div class="radio-box" th:each="dict : ${@dict.getType('open_status')}">
                            <input type="radio" th:id="${dict.dictCode}" name="isEnable" th:value="${dict.dictValue}"
                                   th:field="*{isEnable}">
                            <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>审核状态：</label>
                    <div class="col-sm-8">
                        <div class="radio-box" th:each="dict : ${@dict.getType('applet_review_status')}">
                            <input type="radio" th:id="${dict.dictCode}" name="isEnable" th:value="${dict.dictValue}"
                                   th:field="*{reviewStatus}">
                            <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">支付信息</h4>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label">商户号：</label>
                    <div class="col-sm-8">
                        <input name="appletMchId" placeholder="请输入微信支付商户号" class="form-control" type="number"
                               th:value="*{appletMchId}"
                               maxlength="30">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label">支付密钥：</label>
                    <div class="col-sm-8">
                        <input name="appletPayKey" placeholder="请输入微信支付密钥" class="form-control" type="text"
                               th:value="*{appletPayKey}"
                               maxlength="100">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <div class="form-group">
                    <label class="col-sm-4 control-label">支付证书：</label>
                    <div class="col-sm-8">
                        <input class="form-control" type="file" id="imageBtn" name="imageBtn"
                               onchange="uploadCert(15)"/>
                        <input name="appletPayCert" th:value="*{appletPayCert}"
                               id="appletPayCert" type="hidden">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script>
    var prefix = ctx + "back/shopApplet";
    var coverUrl = "";
    if($.common.isNotEmpty($("#appletPayCert").val())){
        coverUrl='/img/p12img.png';
    }
    $("#form-shopApplet-edit").validate({
        onkeyup: false,
        rules: {
            shopName: {
                minlength: 2,
                maxlength: 20,
                remote: {
                    url: prefix + "/checkShopAppletNameUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "shopAppletId": $("#shopAppletId").val(),
                        "shopAppletName": function () {
                            return $.common.trim($("#shopAppletName").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            }
        },
        messages: {
            "shopAppletName": {
                remote: "小程序名称已被使用"
            },
        },
        focusCleanup: true
    });

    //上传支付证书文件
    $("#imageBtn").fileinput({
        language: 'zh', //设置语言
        dropZoneTitle: '拖拽文件到这里 &hellip;<br>仅支持上传一个证书文件(p12后缀)<br>多次上传替换前个证书',
        allowedFileExtensions: ['p12'],//接收的文件后缀
        showUpload: false, //是否上传文件
        dropZoneEnabled: true,//是否显示拖拽区域
        initialPreview: $.common.isEmpty(coverUrl)?'':'<img src="' + coverUrl + '"class="file-preview-other" width="50%" height="auto" max-height="50%" alt="apiclient_cert.p12" title="apiclient_cert.p12">',
        initialPreviewFileType: 'object',// 文件类型: 图片为images 其他为object
        maxFileCount: 1,
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
    }).on('fileclear', function (event, id) {
        $.modal.alertSuccess("删除证书成功！")
        $("#appletPayCert").val('');
    });

    //通用上传文件
    function ajaxUploadFile(callback, file, modelType,shopId) {
        var formdata = new FormData();
        formdata.append("file", file);
        formdata.append("modelType", modelType);
        formdata.append("shopId", shopId);
        $.modal.loading("上传中...");
        $.ajax({
            url: ctx + "back/upload/cert",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            success: function (result) {
                $.modal.closeLoading();
                callback(result);
            },
            error: function () {
                $.modal.closeLoading();
                $.modal.alertWarning("文件上传失败");
            }
        })
    }

    function uploadCert(modelType) {
        var files = document.getElementById('imageBtn');
        var shopId = parseInt($('#shopId').val());
        if (files) {
            ajaxUploadFile(function (result) {
                if (result.code == 0) {
                    $.modal.alertSuccess("上传证书文件成功！")
                } else {
                    $.modal.alertError("上传证书文件失败，请重试");
                }
                $("#appletPayCert").val(result.url);
            }, files.files[0], modelType,shopId);
        }
    }

    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#form-shopApplet-edit").serializeArray();
            $.operate.save(prefix + "/edit", data);
        }
    }
</script>
</body>
</html>